import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { actionCreators } from 'components/Account/store'
import { Input, Select, Button } from 'antd'
import { accountRoleArr } from 'common/js/module'

const Option = Select.Option

const Search = (props) => {
  const { searchValue, addClick, searchClick, changeSearchUserName, changeSearchRole } = props

  return (
    <div className="search marginB10 clear">
      <div className="pull-left">
        <div className="pull-left flexCenterBox">
          <div className="marginR5">账户名</div>
          <div>
            <Input
              className="searchFormItem"
              value={searchValue.get('userName')}
              onChange={changeSearchUserName}
            />
          </div>
        </div>
        <div className="pull-left flexCenterBox marginL10">
          <div className="marginR5">账户角色</div>
          <div>
            <Select
              allowClear
              className="searchFormItem"
              value={searchValue.get('role')}
              onChange={changeSearchRole}>
              {
                accountRoleArr.map(item => (
                  <Option key={item.key} value={item.key}>{item.value}</Option>
                ))
              }
            </Select>
          </div>
        </div>
        <div className="pull-left marginL10">
          <Button
            shape="circle"
            icon="search"
            onClick={searchClick}
          />
        </div>
      </div>
      <div className="pull-right">
        <Button type="primary" onClick={addClick}>新增账户</Button>
      </div>
    </div>
  )
}

const mapState = (state) => ({
  searchValue: state.getIn(['account', 'searchValue'])
})

const mapActions = (dispatch) => ({
  changeSearchUserName: (e) => {
    dispatch(actionCreators.changeSearchUserNameAction(e.target.value))
  },

  changeSearchRole: (value) => {
    dispatch(actionCreators.changeSearchRoleAction(value))
  }
})

Search.propTypes = {
  addClick: PropTypes.func,
  searchClick: PropTypes.func
}

Search.defaultProps = {
  addClick: () => {},
  searchClick: () => {}
}

export default connect(mapState, mapActions)(Search)
